

<template>
  <view class="Mall4j container">

    <view class="comm-list">
      <view v-for="(item, index) in orderItemInfo" :key="index" class="comm-item">
        <!-- 商品标题内容 -->
        <view class="item-top">
          <view class="top-pic">
            <image mode="aspectFit" :src="item.pic" />
          </view>
          <view class="top-tit">{{ item.prodName }}</view>
        </view>
        <!-- 评价星级 -->
        <view class="item-star">
          <view>{{ i18n.score }}</view>
          <comm-star :value="item.score?item.score:5" type="write" :index="index" @onStarChange="onStarChange" />
        </view>
        <!-- 内容填写 -->
        <view class="item-con">
          <textarea :placeholder="i18n.shareTips" maxlength="500" :value="content" :data-index="index" @input="onContentInput" />
        </view>

        <!-- 添加图片 -->
        <view class="item-pics">
          <!-- 预览缩略图 -->
          <view class="question-images">
            <block v-for="(imgItem, idx) in item.images" :key="idx">
              <view class="q-image-wrap">
                <!-- 图片缩略图  -->
                <image class="q-image" :src="imgItem.url" mode="aspectFill" :data-idx="idx" :data-index="index" @tap="comPicPreView" />
                <!-- 移除图片的按钮  -->
                <view class="q-image-remover" :data-idx="idx" :data-index="index" @tap="removeImage">{{ i18n.delete }}</view>
              </view>
            </block>
            <!-- 添加 -->
            <view v-if="item.images.length < 9" class="add-pic" :data-idx="index" @tap="getUploadImg">+</view>
          </view>
        </view>
        <!-- 提示 -->
        <view class="img-tip">({{ i18n.maxUpPic }})</view>
        <!--/提示-->
        <!-- 匿名评价 -->
        <view class="item-btm">
          <checkbox color="red" :data-index="index" :checked="item.isAnonymous == 1" @tap="onSelectedItem">{{ i18n.anonymousEvaluation }}</checkbox>
        </view>
      </view>
    </view>

    <view class="comm-btn" @tap="submitComm">{{ i18n.postReview }}</view>

  </view>
</template>

<script>
var http = require('../../utils/http.js')
var util = require('../../utils/util.js')
import commStar from '../../components/comm-star/index.vue'

export default {

  components: {
    commStar
  },
  props: {},
  data() {
    return {
      orderItemInfo: [],
      // 订单列表页参数
      submitCommCount: 0, // 已经提交的评论数量
      content: '' // 评论内容
    }
  },

  computed: {
    i18n() {
      return this.$t('index')
    }
  },

  /**
		 * 生命周期函数--监听页面加载
		 */
  onLoad: function(options) {
    // 获取上页（订单列表）数据
    var orderItemInfo = wx.getStorageSync('orderItemInfo') // console.log(orderItemInfo);

    for (var i = 0; i < orderItemInfo.length; i++) {
      orderItemInfo[i].images = []
      orderItemInfo[i].content = ''
      orderItemInfo[i].score = 5
      orderItemInfo[i].isAnonymous = 1
      orderItemInfo[i].evaluate = 0
    }

    this.setData({
      orderItemInfo: orderItemInfo
    })
    console.log(orderItemInfo)
  },

  /**
		 * 生命周期函数--监听页面初次渲染完成
		 */
  onReady: function() {},

  /**
		 * 生命周期函数--监听页面显示
		 */
  onShow: function() {
    // 头部导航标题
    uni.setNavigationBarTitle({
      title: this.i18n.productEvaluation
    })
  },

  /**
		 * 生命周期函数--监听页面隐藏
		 */
  onHide: function() {},

  /**
		 * 生命周期函数--监听页面卸载
		 */
  onUnload: function() {},

  /**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
  onPullDownRefresh: function() {},

  /**
		 * 页面上拉触底事件的处理函数
		 */
  onReachBottom: function() {},

  /**
		 * 用户点击右上角分享
		 */
  onShareAppMessage: function() {},
  methods: {
    /**
			 * 发表评论
			 */
    submitComm: function(e) {
      var orderItemInfo = this.orderItemInfo
      var allFill = true

      for (var i = 0; i < orderItemInfo.length; i++) {
        var cont = orderItemInfo[i].content.trim()

        if (cont == '') {
          uni.showToast({
            title: this.i18n.evaluationEmpty,
            icon: 'none'
          })
          allFill = false
          break
        }
      }

      if (allFill) {
        for (let i = 0; i < orderItemInfo.length; i++) {
          var pics = ''
          orderItemInfo[i].images.forEach(function(item) {
            pics += item.path + ','
          })

          if (pics != '') {
            pics = pics.substring(0, pics.length - 1)
          } // 发布评论

          var params = {
            url: '/p/prodComm',
            method: 'POST',
            data: {
              content: orderItemInfo[i].content,
              score: orderItemInfo[i].score,
              evaluate: orderItemInfo[i].evaluate,
              isAnonymous: orderItemInfo[i].isAnonymous,
              orderItemId: orderItemInfo[i].orderItemId,
              prodId: orderItemInfo[i].prodId,
              pics: pics
            },
            callBack: res => {
              this.setData({
                submitCommCount: this.submitCommCount + 1
              })

              if (this.submitCommCount == orderItemInfo.length) {
                uni.showModal({
                  title: this.i18n.tips,
                  content: this.i18n.evaluationSuccessful,
                  showCancel: false,
                  confirmText: this.i18n.confirm,
                  success(res) {
                    uni.redirectTo({
                      url: '/pages/order-list/order-list?sts=5',
                      success: function(e) {
                        var page = getCurrentPages().pop() // 跳转页面成功之后
                        if (!page) return
                        console.log(page)
                        page.onLoad() // 如果页面存在，则重新刷新页面
                      }
                    })
                  }

                })
              }
            }
          }
          http.request(params)
        }
      }
    },

    /**
     * 上传图片
     */
    getUploadImg(e) {
      const idx = e.target.dataset.idx
      uni.chooseImage({
        count: 1,
        // 默认9
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          let _type = res.tempFiles[0].type
          // #ifndef H5
          const _path = res.tempFiles[0].path
          _type = _path.substring(_path.lastIndexOf('.'))
          // #endif
          // 限制图片上传格式
          if (_type.indexOf('png') == -1 && _type.indexOf('jpg') == -1 && _type.indexOf('jpeg') == -1) {
            uni.showToast({
              title: this.i18n.uploadPictureFile,
              icon: 'none'
            })
            return
          }
          var tempFilePaths = res.tempFilePaths
          var params = {
            url: '/p/file/upload',
            filePath: tempFilePaths[0],
            name: 'file',
            callBack: (res2) => {
              var img = {}
              img.path = res2.filePath
              img.url = res2.resourcesUrl + res2.filePath
              var orderItemInfo = this.orderItemInfo
              orderItemInfo[idx].images.push(img)
              this.setData({
                orderItemInfo: orderItemInfo
              })
            }
          }
          if (util.lessThan2M(res.tempFiles)) {
            http.upload(params)
          }
        }
      })
    },

    /**
			 * 评价图片预览
			 */
    comPicPreView(e) {
      var index = e.currentTarget.dataset.index
      var idx = e.currentTarget.dataset.idx
      var urls = []
      this.orderItemInfo[index].images.forEach(el => {
        urls.push(el.url)
      })
      uni.previewImage({
        current: urls[idx],
        urls: urls
      })
    },

    /**
			 * 删除图片
			 */
    removeImage(e) {
      const idx = e.target.dataset.idx
      const index = e.target.dataset.index
      var orderItemInfo = this.orderItemInfo
      orderItemInfo[index].images.splice(idx, 1)
      this.setData({
        orderItemInfo: orderItemInfo
      })
    },

    onContentInput: function(e) {
      const index = e.target.dataset.index
      var orderItemInfo = this.orderItemInfo
      orderItemInfo[index].content = e.detail.value
      this.setData({
        orderItemInfo: orderItemInfo
      })
    },

    /**
			 * 匿名评价
			 * 每一项的选择事件
			 */
    onSelectedItem: function(e) {
      var index = e.target.dataset.index // 获取data- 传进来的index

      var orderItemInfo = this.orderItemInfo // 获取评论项

      var isAnonymous = orderItemInfo[index].isAnonymous // 获取当前评价的选中状态

      if (isAnonymous == 1) {
        isAnonymous = 0
      } else {
        isAnonymous = 1
      }

      orderItemInfo[index].isAnonymous = isAnonymous // 改变状态

      this.setData({
        orderItemInfo: orderItemInfo
      })
    },
    onStarChange: function(e) {
      var index = e.idx
      var val = e.val
      var evaluate = 0
      var orderItemInfo = this.orderItemInfo

      if (val < 3) {
        evaluate = 2
      } else if (val == 3) {
        evaluate = 1
      }

      orderItemInfo[index].score = val
      orderItemInfo[index].evaluate = evaluate
      this.setData({
        orderItemInfo: orderItemInfo
      })
    }
  }
}
</script>
<style>
	@import "./prod-comm.css";
</style>
